<template>
    <div class="sideBarWrap" @click.right="rightClickMet($event,'blank')" ref="sideBarWrap">
        <el-aside 
            :class="{'collapseTime':collapseAside,'notCollapseTime':!collapseAside}">
            <div 
                @click.right.stop="rightClickMet($event,'logo')"
                class="logoArea verMiddle" 
                @click="go('activity')">
                <img src="../../assets/bank.png" />
                <span v-if="!collapseTitle">{{$setting.lay_title}}</span>
            </div>
            <el-scrollbar :max-height="scrollHeight">
                <el-menu
                    class="el-menu-vertical-demo"
                    text-color="#4F5969"
                    active-text-color="#175EFF"
                    :collapse="collapse"
                    background-color="#fff"
                    :default-active="defaultActive"
                    @open="handleOpen"
                    @close="handleClose"
                >
                    <subMenu ref="subMenuRef" :subMenuData="routeConfigArr"></subMenu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
    </div>
</template>
<script>
import { ref } from 'vue'
import { Document } from '@element-plus/icons-vue';
import subMenu from "./subMenu.vue";
export default {
    props:{
        routeConfig:{
            type:Object,
            default:() => {}
        }
    },
    data() {
        return {
            defaultActive: '',
            routeConfigArr:[],
            scrollHeight:-1,
            elAsideWidth:220,
            collapse:false,
            collapseAside:false,
            collapseTitle:false
        }
    },
    created(){
        this.$mitt.on("tagClick",this.setHighSidebar);
        this.$mitt.on("sideBarClick",this.setHighSidebar);
        this.routeConfigArr = this.$util.filterTreeByFunc(this.routeConfig);
    },
    mounted(){
        //设置滚动条高度
        this.scrollHeight = this.$refs.sideBarWrap.offsetHeight - 60;
    },
    components:{
        subMenu,
    },
    methods: {
        handleOpen(key, keyPath) {},
        handleClose() {},
        go(name) {
            this.$router.push({ name: name })
        },
        setHighSidebar(item){
            if(typeof item.detailName == 'undefined'){
                var routePath = item.path;
            }else{
                let onlyPageRouter = this.$util.onlyPageObj(this.$util.treeToArray(this.routeConfigArr));
				var routePath = onlyPageRouter[item.belongTo].path;
            }
            this.defaultActive = routePath.split("/").join("");
        },
        collapseMet(isCollapse){
            var _this = this;
            if (isCollapse) {
                this.$refs.subMenuRef.collapseMet(isCollapse);
                this.collapseAside = true;
                this.collapseTitle = true;
                setTimeout(() => {
                    _this.collapse = true;
                }, 10);
            } else {
                this.elAsideWidth = 220;
                this.collapseAside = false;
                setTimeout(() => {
                    _this.collapse = false;
                }, 10);
                setTimeout(() => {
                    _this.collapseTitle = false
                }, 300);
            }
        },
        rightClickMet(event,params){
            if(params == 'logo'){
                return;
            }else if(params == 'blank'){
                this.$emit('rightClick',event);   
            }
        },
    }
}
</script>
<style type="text/css" lang="less">
@import "./index.less";
.sideBarWrap {
    //图标
    .logoArea {
        width: 100%;
        height: 60px;
        background: #fff;
        color: #000;
        cursor: pointer;
        padding-left:25px;
        box-sizing: border-box;
        border-bottom:1px solid #f1f2f3;
        img{
            width:25px;
            height:25px;
            vertical-align:middle;
            margin-right:6px;
        }
        span{
            vertical-align:middle;
        }
    }
}
</style>
